<template>
    <div class="container">
        <div class="mask_container" @click.stop="closePopup" v-show="closeFlag"></div>
        <div class="address_container" v-show="closeFlag">
            <div class="address_title">
                <p class="title">
                    <slot>配送至</slot>
                </p>
                <span class="close" @click.stop="closePopup"></span>
            </div>
            <div class="address_detail_info">
                <div class="address_nav">
                    <div :class="['address_nav_name', {nav_active: currentIndex == 0}]" @click.stop="changeTab(0)">
                        {{selectProvince ? selectProvince : '请选择'}}</div>
                    <div :class="['address_nav_name', {nav_active: currentIndex == 1}]" v-if="selectProvince && hasCity"
                        @click.stop="changeTab(1)">
                        {{selectCity ? selectCity : '请选择'}}</div>
                    <div :class="['address_nav_name', {nav_active: currentIndex == 2}]" v-if="selectCity && hasTown"
                        @click.stop="changeTab(2)">
                        {{selectTown ? selectTown : '请选择'}}</div>
                </div>
                <div class="address_panel">
                    <ul class="address_panel_list" v-show="currentIndex == 0">
                        <li v-for="(item, index) in provinceData" :key="item.value" @click.stop="touchProvince(item.children, item.text, index)"
                            :class="['address_panel_item', {panel_item_active: item.text == selectProvince}]">{{item.text}}</li>
                    </ul>
                    <ul class="address_panel_list" v-show="currentIndex == 1">
                        <li v-for="(item, index) in cityData" :key="item.value" @click.stop="touchCity(item.children, item.text, index)"
                            :class="['address_panel_item', {panel_item_active: item.text == selectCity}]">{{item.text}}</li>
                    </ul>
                    <ul class="address_panel_list" v-show="currentIndex == 2">
                        <li v-for="(item, index) in townData" :key="item.value" @click.stop="touchTown(item.children, item.text, index)"
                            :class="['address_panel_item', {panel_item_active: item.text == selectTown}]">{{item.text}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        addressData
    } from '@/components/address.js'
    export default {
        data() {
            return {
                addressApi: [], // 三级联动接口
                closeFlag: true,
                currentIndex: 0,
                provinceData: [],
                cityData: [],
                townData: [],
                selectProvince: '',
                selectCity: '',
                selectTown: '',
                hasCity: false, // 外部的城市是否有数据
                hasTown: false, // 外部的城镇是否有数据
                showAddress: {
                    'province': '',
                    'city': '',
                    'town': '',
                    'openPopFlag': false
                }
            }
        },
        props: {
            province: String,
            city: String,
            town: String
        },
        mounted() {
            this.addressApi = addressData()
            this.initAddressData()
            this.$nextTick(() => {
                this.returnTop(this.currentIndex)
            })
        },
        methods: {
            // 首次渲染接口数据
            initAddressData() {
                this.getData()
            },
            returnTop (currentIndex) {
                // 条目的容器，进行向上滚动操作(address_panel_list)
                let addressPanelList = document.getElementsByClassName('address_panel_list')
                let activeItem = document.getElementsByClassName('panel_item_active')
                let activeItemIndex = currentIndex
                // 可视区屏幕高度
                let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
                // 地址ul面板距离顶部的距离
                let addressPanelClientTop = addressPanelList[activeItemIndex].getBoundingClientRect().top
                // 距离容器顶部距离
                let addressPanelTop = addressPanelList[activeItemIndex].offsetTop
                // 激活元素距离容器顶部距离
                if (activeItem[activeItemIndex] != undefined) {
                    let activeItemTop = activeItem[activeItemIndex].offsetTop
                    // 判断激活元素是否进入容器可视区
                    let distance = addressPanelClientTop - addressPanelTop  + activeItemTop - clientHeight
                    if (distance >= 0) {
                        // 激活元素在容器底部，不在容器可视范围，进行滚动，让激活元素到可视区
                        let scrollTopMargin = distance + addressPanelTop
                        addressPanelList[currentIndex].scrollTop = scrollTopMargin
                    }
                }
            },
            // 查找省市县数据
            getData() {
                this.provinceData = this.addressApi
                this.selectProvince = this.province
                this.showAddress.province = this.selectProvince
                this.closeFlag = true
                for (let index in this.provinceData) {
                    let text = this.provinceData[index].text
                    if (this.province === text) {
                        if (this.city) {
                            this.currentIndex = 1
                            this.selectCity = this.city
                            this.showAddress.city = this.selectCity
                            this.hasCity = true
                        }
                        this.cityData = this.provinceData[index].children
                        for (let cityIndex in this.cityData) {
                            if (this.town) {
                                this.currentIndex = 2
                                this.selectTown = this.town
                                this.showAddress.town = this.selectTown
                                this.hasTown = true
                            }
                            let cityText = this.cityData[cityIndex].text
                            if (this.city === cityText) {
                                this.townData = this.cityData[cityIndex].children
                            }
                        }
                    }
                }
            },
            // 点击省份
            touchProvince(provinceChildren, text, index) {
                this.cityData = provinceChildren
                this.selectProvince = text
                this.selectCity = ''
                this.selectTown = ''
                this.hasCity = true
                this.hasTown = true
                this.currentIndex = 1
                this.provinceActiveIndex = index
                if (!this.cityData) {
                    // console.log('没市区数据')
                    this.showAddress.province = this.selectProvince
                    this.showAddress.city = ''
                    this.showAddress.town = ''
                    this.closeFlag = false
                    this.getAddressData(this.showAddress)
                }
            },
            // 点击市区
            touchCity(cityChildren, text, index) {
                this.townData = cityChildren
                this.selectCity = text
                this.selectTown = ''
                this.currentIndex = 2
                this.cityActiveIndex = index
                if (!this.townData) {
                    // console.log('没城镇数据')
                    this.showAddress.province = this.selectProvince
                    this.showAddress.city = this.selectCity
                    this.showAddress.town = ''
                    this.closeFlag = false
                    this.getAddressData(this.showAddress)
                }
            },
            // 点击城镇
            touchTown(children, text, index) {
                this.selectTown = text
                this.showAddress.province = this.selectProvince
                this.showAddress.city = this.selectCity
                this.showAddress.town = this.selectTown
                this.closeFlag = false
                this.getAddressData(this.showAddress)
            },
            // 点击tabBar切换
            changeTab(currntIndex) {
                this.currentIndex = currntIndex
                // console.log(text)
                // if () {}
                this.$nextTick(() => {
                    this.returnTop(currntIndex)
                })
            },
            getAddressData(obj) {
                this.$emit('getAddressData', obj)
            },
            // 关闭弹窗
            closePopup() {
                this.closeFlag = false
                this.getAddressData(this.showAddress)
            }
        }
    }

</script>

<style lang="scss" scoped>
    // 布局
    @mixin center ($justifyContent: center, $alignItems: center, $flexDirection: row) {
        display: flex;
        display: -webkit-flex;
        justify-content: $justifyContent;
        align-items: $alignItems;
        flex-direction: $flexDirection;
    }

    @mixin close_sign () {
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;

        &:after {
            content: "\2715"; //形状X
            color: #a2b6c5;
            font-size: 16px;
            cursor: pointer;
        }
    }
    p,
    div,
    ul,
    li {
        padding: 0;
        margin: 0;
    }

    $addressBgColor: #fff;
    $addressHeight: 50px;

    .mask_container {
        position: fixed;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.4)
    }

    .address_container {
        position: fixed;
        z-index: 1000;
        height: 500px;
        width: 100%;
        background-color: $addressBgColor;
        left: 0;
        bottom: 0;

        .address_title {
            width: 100%;
            height: $addressHeight;
            position: relative;
            background-color: $addressBgColor;

            .title {
                flex: 1;
                height: 100%;
                border-bottom: 1px #ccc solid;
                @include center();
            }

            .close {
                @include close_sign();
            }
        }

        .address_detail_info {

            // tab标题
            .address_nav {
                height: 50px;
                border-bottom: 1px #ccc solid;
                background-color: $addressBgColor;
                @include center(flex-start);

                .address_nav_name {
                    height: 100%;
                    padding: 0 10px;
                    @include center();

                    &.nav_active {
                        border-bottom: 1px solid red;
                    }
                }
            }

            // 主体内容
            .address_panel {
                .address_panel_list {
                    overflow-y: auto;
                    height: 400px;
                }

                .address_panel_item {
                    flex: 1;
                    padding-left: 10px;
                    @include center(flex-start);
                    height: $addressHeight;
                    background-color: $addressBgColor;

                    &.panel_item_active {
                        color: red;
                        &:after{
                            content: "\2714";//形状✅
                            font-size: 14px;
                            text-indent: 5px;
                        }
                    }
                }
            }
        }
    }

</style>
